import React from 'react';
export const StageNavigation = () => {
  const stages = [{
    id: 'pregnancy',
    title: 'Pregnancy',
    image: 'https://images.unsplash.com/photo-1595924738946-7169f41c363c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    description: 'Essential products and preparation for the journey ahead'
  }, {
    id: 'newborn',
    title: 'Newborn (0-3M)',
    image: 'https://images.unsplash.com/photo-1519689680058-324335c77eba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    description: 'Everything you need for those precious first months'
  }, {
    id: 'baby',
    title: 'Baby (4-12M)',
    image: 'https://images.unsplash.com/photo-1566004100631-35d015d6a491?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    description: 'Support their growth and development with the right gear'
  }, {
    id: 'toddler',
    title: 'Toddler (1-3Y)',
    image: 'https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    description: 'Products that grow with your curious explorer'
  }];
  return <section className="py-16">
      <div className="text-center mb-12">
        <h2 className="font-nunito font-semibold text-2xl md:text-3xl text-dark mb-4">
          Find Products by Stage
        </h2>
        <p className="font-inter text-gray-600 max-w-2xl mx-auto">
          Every stage of childhood has unique needs. Discover products
          specifically selected for your little one's current development phase.
        </p>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        {stages.map(stage => <a key={stage.id} href={`#${stage.id}`} className="group relative rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
            <div className="aspect-[4/3] w-full">
              <img src={stage.image} alt={stage.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
              <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
            </div>
            <div className="absolute bottom-0 left-0 right-0 p-4 text-white">
              <h3 className="font-nunito font-semibold text-xl mb-1">
                {stage.title}
              </h3>
              <p className="text-sm text-white/80">{stage.description}</p>
            </div>
          </a>)}
      </div>
    </section>;
};